<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<!-- 弹出层 -->
		<view>
			<view>
				<u-popup :show="show1" mode="bottom" closeable=true @close="show1 = !show1">
					<view style="height: 200px;display: flex;flex-direction: column;align-items: center;">
						<text style="font-size: 17px;">昵称</text>
						<view style="height: 20px;margin-top: 30px;">
							<u-input style="border: 1px solid;" v-model="userName" type="text" clearable></u-input>
						</view>
						<view style="margin-top: 30px;">
							<u-button type="success" text="确定" customStyle="width: 200rpx"
								@click="userNameClick"></u-button>
						</view>
					</view>
				</u-popup>
			</view>

			<view>
				<u-picker :show="show2" @cancel="show2 = !show2" @confirm="sexConfirm" :columns="columns"
					keyName="label" title="性别"></u-picker>
			</view>
		</view>
		<!-- end -->

		<!-- 头像背景 -->
		<view class="head">
			<view class="user" @click="uploadImg">
				<u--image :src="profilePhotoUrl" width="100" height="100" shape="circle"></u--image>
				<text style="font-size: 12px;color: #999999;">点击头像上传头像</text>
			</view>
		</view>

		<!--  -->
		<view class="content">
			<view class="cell">
				<u-cell-group>
					<u-cell>
						<template #title>
							<view>
								<text>账号</text>
								<text class="msg">{{userId}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell @click="show1 = !show1" :isLink="true">
						<template #title>
							<view>
								<text>昵称</text>
								<text class="msg">{{userName}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell @click="show2 = !show2" :isLink="true">
						<template #title>
							<view>
								<text>性别</text>
								<text class="msg">{{sex == 1 ?'男':'女'}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell :isLink="true">
						<template #title>
							<view>
								<text>生日</text>
								<text class="msg">{{birthday?birthday:'未知'}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell :isLink="true">
						<template #title>
							<view>
								<text>邮箱</text>
								<text class="msg">{{email}}</text>
							</view>
						</template>
					</u-cell>
					<u-cell title="注册时间" :value="joinDate">
					</u-cell>
				</u-cell-group>
			</view>

			<!-- 保存按钮 -->
			<view class="save">
				<u-button type="primary" @click="save" size="large" color="#00ff7f" text="保存"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	import {
		uploadOss
	} from '@/ossUtils/ossUploadImg.js'
	export default {
		data() {
			return {
				isUpdate: false,
				userId: '',
				email: '',
				userName: '',
				sex: '',
				joinDate: '',
				profilePhotoUrl: '',
				birthday: '',
				show1: false,
				show2: false,
				columns: [
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 0
					}]
				]
			}
		},
		onShow() {
			//从缓存读取user数据
			var data;
			try {
				var res = uni.getStorageSync('user');
				if (res) {
					data = res;
				}
			} catch (e) {
				// error
				console.log(e)
			}
			this.userId = data.userId;
			this.email = data.email;
			this.userName = data.userName;
			this.sex = data.sex;
			this.joinDate = data.joinDate;
			this.profilePhotoUrl = data.profilePhotoUrl ? data.profilePhotoUrl : '';
			this.birthday = data.birthday;
		},
		methods: {
			userNameClick() {
				this.isUpdate = true;
				this.show1 = !this.show1;
			},
			sexConfirm(e) {
				this.isUpdate = true;
				this.sex = e.values[0][e.indexs[0]].id;
				this.show2 = false
			},
			uploadImg() {
				this.isUpdate = true;
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'], //从相册选择
					success: async res => {
						that.profilePhotoUrl = res.tempFilePaths[0];
					},
					fail: function(res) {
						that.$refs.uToast.show({
							position: 'top',
							message: '选择失败',
							type: 'error',
						})
					}
				});
			},
			async save() {
				if (!this.isUpdate) {
					this.$refs.uToast.show({
						position: 'top',
						message: '你没有修改信息哦',
						type: 'error',
					})
					return;
				}
				uni.showLoading({
					title: '正在上传...'
				})
				//上传图片到oss
				var pUrl = '',
					pUrl = await uploadOss(this.profilePhotoUrl);
				http.post('/user/update/' + getApp().globalData.token, {
					userId: this.userId,
					email: this.email,
					userName: this.userName,
					sex: this.sex,
					profilePhotoUrl: pUrl,
					birthday: this.birthday,
				}).then(res => {
					var data = res.data.data;
					uni.hideLoading();
					if (data != 1) {
						uni.hideLoading();
						uni.showToast({
							icon: "error",
							title: '上传失败',
							duration: 2000
						});
						return;
					}
					//删除原来缓存中的用户信息
					try {
						uni.removeStorageSync('user')
					} catch (e) {
						console.log(err);
					}
					//重新获取用户信息
					http.get('/token/getUserByToken', {
						params: {
							token: getApp().globalData.token
						}
					}).then(res => {
						var data = res.data.data;
						if (data === null) {
							getApp().globalData.isLogin = false;
							//没有获取到用户信息，清空缓存
							try {
								uni.removeStorageSync('user');
							} catch (e) {
								console.log(err);
							}
							try {
								uni.removeStorageSync('token');
							} catch (e) {
								console.log(err);
							}
						} else {
							//确认是否登录
							if (data.userId) {
								getApp().globalData.isLogin = true;
							}
							//缓存user信息
							try {
								uni.setStorageSync('user', data);
							} catch (e) {
								// error
								console.log(e);
							}
						}
						this.$refs.uToast.show({
							position: 'top',
							message: '保存成功',
							type: 'success',
						})
						setTimeout(() => {
							//跳转我的页面
							uni.switchTab({
								url: '/pages/tabbar/me/me'
							})
						}, 1500);
					}).catch(err => {
						console.log(err);
					})
				}).catch(err => {
					console.log(err);
				})

			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.head {
		width: 100%;
		height: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		text-align: center;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.save {
		margin: 20px 15px 0 15px;
	}

	.msg {
		margin-left: 20px;
	}
</style>